import { defineComponent, onMounted, ref, watch } from "vue";
import { GetAllYuanQuSel } from "@/api/modules/pulbic";
import { useZhenDuanJieGuo } from "@/stores/modules/zhenDuanJieGuo";

export const JiBenXinXiYi = defineComponent({
  name: "JiBenXinXiYi",
  setup() {
    const state = ref<any>({
      ruleForm: {}
    });
    const yuanQuType = ref<any>([]);
    // 医院的数据信息
    const hospitalLs = () => {
      GetAllYuanQuSel().then((res: any) => {
        yuanQuType.value = [];
        res.Data?.map((item: string) => {
          let objLs = {
            value: item,
            label: item
          };
          yuanQuType.value.push(objLs);
        });
      });
    };
    const convertStringToArray = str => {
      if (str && typeof str === "string") {
        if (str.includes(";")) {
          let arr = str.split(";");
          arr = arr.map(item => item.trim());
          arr = arr.filter(item => {
            // 过滤掉空字符串
            if (item === "") return false;
            return !/^\s*$/.test(item);
          });
          return arr;
        } else {
          return [str];
        }
      } else {
        return [];
      }
    };

    onMounted(() => {
      hospitalLs();
    });
    watch(
      () => useZhenDuanJieGuo().jiBingTableSomeOne,
      () => {
        if (Object.keys(useZhenDuanJieGuo().jiBingTableSomeOne).length > 0 && useZhenDuanJieGuo().jiBingID) {
          state.value.ruleForm.JiBingMingCheng = useZhenDuanJieGuo().jiBingTableSomeOne.JiBingMingCheng;
          state.value.ruleForm.PYM = useZhenDuanJieGuo().jiBingTableSomeOne.PYM;
          state.value.ruleForm.JieShi = useZhenDuanJieGuo().jiBingTableSomeOne.JieShi;
          state.value.ruleForm.JianYi = useZhenDuanJieGuo().jiBingTableSomeOne.JianYi;
          // state.value.ruleForm.SuoShuYuanQu = yuanQuType.value.map((item: any) => item.value);
          state.value.ruleForm.SuoShuYuanQu = convertStringToArray(useZhenDuanJieGuo().jiBingTableSomeOne.SuoShuYuanQu);
          useZhenDuanJieGuo().setJiBingTableAddList(state.value.ruleForm);
        }
      },
      {
        deep: true,
        immediate: true
      }
    );
    watch(
      () => state.value.ruleForm,
      () => {
        useZhenDuanJieGuo().setJiBingTableAddList(state.value.ruleForm);
      },
      {
        deep: true,
        immediate: true
      }
    );
    return () => {
      return (
        <div className="JiBenXinXiYi">
          <div class="el-form-ls px-20">
            <div class="JiBenXinXiEr-form-item w-full mt-10 ">
              <span>所属院区：</span>
              <el-select
                class="w-full mt-10"
                ref="SuoShuYuanQuRef"
                multiple
                collapse-tags
                collapse-tags-tooltip
                v-model={state.value.ruleForm.SuoShuYuanQu}
                placeholder="请选择所属院区"
                clearable
              >
                {yuanQuType.value.map((item: any) => (
                  <el-option key={item.value} label={item.label} value={item.value} />
                ))}
              </el-select>
            </div>
            <div class="JiBenXinXiEr-form-item w-full mt-10 ">
              <span>诊断结果名称：</span>
              <el-input
                class=" mt-10"
                ref="JianChaLeiBieRef"
                v-model={state.value.ruleForm.JiBingMingCheng}
                placeholder={"请输入诊断结果名称"}
                clearable
              ></el-input>
            </div>
            <div class="JiBenXinXiEr-form-item w-full mt-10 ">
              <span>拼音码：</span>
              <el-input
                class=" mt-10"
                ref="JianChaLeiBieRef"
                v-model={state.value.ruleForm.PYM}
                placeholder={"请输入拼音码"}
                clearable
              ></el-input>
            </div>
            <div class="JiBenXinXiEr-form-item w-full mt-10 ">
              <span>解释：</span>
              <el-input
                class=" mt-10"
                type="textarea"
                ref="JianChaLeiBieRef"
                autosize={{ minRows: 8, maxRows: 8 }}
                v-model={state.value.ruleForm.JieShi}
                placeholder={"请输入解释"}
              ></el-input>
            </div>
            <div class="JiBenXinXiEr-form-item w-full mt-10 ">
              <span>建议：</span>
              <el-input
                class=" mt-10"
                type="textarea"
                ref="JianChaLeiBieRef"
                autosize={{ minRows: 8, maxRows: 8 }}
                v-model={state.value.ruleForm.JianYi}
                placeholder={"请输入建议"}
              ></el-input>
            </div>
          </div>
        </div>
      );
    };
  }
});
